﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title></title>
    <link href="../../static/css/font.css" rel="stylesheet" />
    <link href="../../static/css/weadmin.css" rel="stylesheet" />
    <link href="../../lib/layui/css/layui.css" rel="stylesheet" />
    <script src="../../../lib/layui/layui.js"></script>

    <script type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/static/echarts/echarts.min.js"></script>
    <style>
        .layui-form {
            margin-left: 10%;
        }

        .layui-tab-title .layui-this {
            background: #00ffff;
        }

        .layui-tab-title li {
            border: none;
            display: block;
        }

        .layui-tab-title {
            float: left;
            width: 10%;
            box-sizing: border-box;
            margin-top: 20px;
        }

        .layui-tab-content {
            margin: 0 auto;
            width: 80%;
        }
    </style>
</head>
<body>
    

    <div class="layui-tab layui-form">
        <div class="layui-form">
            <div class="layui-inline layui-sition">
                <div class="layui-inline" id="cd">
                    <label class="layui-form-label">统计对象：</label>
                    <div class="layui-input-inline">
                        <select id="ddl" name="ddl" lay-filter="ddlSel">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>

                <label class="layui-input-inline layui-form-label-inner" style="margin-left:20px">起止日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="startDate" name="startDate" />
                </div>
                <div class="layui-input-inline layui-form-label-inner">
                    <input type="text" class="layui-input" id="endDate" name="endDate" />
                </div>

                <button type="button" class="layui-btn layui-btn-primary" id="find" name="查询" onclick="btn_search()"><i class="layui-icon">&#xe615;</i>查询</button>
            </div>
        </div>
    </div>

    <div id="container" style="height: 400px"></div>

    <script type="text/javascript">
        //var xDataStr = ['a', 'b', 'c', 'd', 'e', 'f','g']
        //var xDataStr = ['2019-09-26', '2019-09-27', '2019-09-28', '2019-09-29', '2019-09-30', '2019-10-01', '2019-10-02', '2019-10-03', '2019-09-27', '2019-09-28', '2019-09-29', '2019-09-30', '2019-10-01', '2019-10-02', '2019-10-03', '2019-09-27', '2019-09-28', '2019-09-29', '2019-09-30', '2019-10-01', '2019-10-02', '2019-10-03', '2019-09-27', '2019-09-28', '2019-09-29', '2019-09-30', '2019-10-01', '2019-10-02', '2019-10-03']
        var xDataStr = [];  //['09-26', '09-27', '09-28', '09-29', '09-30', '10-01', '10-02', '10-03', '09-27', '09-28', '09-29', '09-30', '10-01', '10-02', '10-03', '09-27', '09-28', '09-29', '09-30', '10-01', '10-02', '10-03', '09-27', '09-28', '09-29', '09-30', '10-01', '10-02', '10-03']
        var yDataStr = []; //[1, 2, 1, 0, 2, 0, 2, 1, 2, 0, 2, 2, 1, 2, 0, 2, 2, 1, 2, 0, 2, 2, 1, 2, 2, 0]

        var ddlId = '';   //下拉列表id
        var ddlName = '';  //下拉列表显示值
        var allDate = [];  //前台起止日期间的所有日期

        var retDate = [];  //后台返回的日期
        var retNum = [];   //后台返回的次数


        //批量声明登录用户信息（用户id,用户所有信息，用户角色id,用户部门id）
        var uid, GetUserInfo, userRoleId, userDeptId

        //后台查询学习人数sql语句中需要的一个参数
        var parm = '';

        $(function () {
            var sd = getPreMonthDate(); //获取开始日期 
            var ed = getCurrDate(); //获取结束日期

            //加载日期
            $("#startDate").val(sd)  //开始日期取上月26日
            $("#endDate").val(ed)


            //获取登录用户的相关信息
            uid = JSON.parse(window.localStorage.authInfo).UserId;
            userInfo = GetUserInfo(uid);   //
            userRoleId = userInfo.RoleID;  //用户角色id
            userDeptId = userInfo.DeptID;  //用户所在部门

            //alert(userRoleId + "/" + userDeptId)

            parm = userDeptId;

            layui.use(['form'], function () {
                form = layui.form;
                form.on('select(ddlSel)', function (data) {
                    //var val = data.value;
                    //console.log(val);
                    btn_search() //调用查询按钮
                });
            });

            //点击日期输入框弹出日期控件
            layui.use(['form', 'laydate', 'table', 'jquery', 'element', 'layer', 'tree', 'util'], function () {
                var laydate = layui.laydate;
                laydate.render({ elem: '#startDate', trigger: 'click', type: 'date', format: 'yyyy-MM-dd' });
                laydate.render({ elem: '#endDate', trigger: 'click', type: 'date', format: 'yyyy-MM-dd' });

            })

            if (userRoleId == 4) {  //4代表车队管理人员
                LoadDDL(userRoleId, userDeptId)
                GetChartData(ddlId, getPreMonthDate(), getCurrDate(), userRoleId, userDeptId)
            }
            else if (userRoleId == 3) {  //3代表车间管理人员
                LoadDDL(userRoleId, userDeptId);  //获得此车间下的所有车队，加载到下拉列表中
                GetChartData(ddlId, getPreMonthDate(), getCurrDate(), userRoleId, userDeptId)
            }
            else if (userRoleId == 2) {  //2代表段管理人员
                LoadDDL(userRoleId, userDeptId);  //获得段下的所有车间，加载到下拉列表中
                GetChartData(ddlId, getPreMonthDate(), getCurrDate(), userRoleId, "")
            }
            else {
                alert("没有权限查看该模块！")
                history.go(-1);
            }
            //加载曲线图
            LoadChart();
        })

        //加载下拉列表
        function LoadDDL(userRoleId, userDeptId) {
            
            $.ajax({
                type: 'get',
                url: ApiUrl + "Charts/GetDDL",
                cache: false,
                dataType: "json",
                async: true,
                data: { uRoleId: userRoleId, DeptID: userDeptId },
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
                success: function (res) {
                    if (userRoleId == 4) {  //4代表车队管理人员
                        for (var i = 0; i < res.Data.length; i++) {
                            var option = document.createElement("option");
                            $(option).val(res.Data[i].UserID);
                            $(option).text(res.Data[i].UserName);
                            $('#ddl').append(option);
                        }
                    }
                    if (userRoleId == 3) {  //3代表车间管理人员
                        for (var i = 0; i < res.Data.length; i++) {
                            var option = document.createElement("option");
                            $(option).val(res.Data[i].DepID);
                            $(option).text(res.Data[i].DepName);
                            $('#ddl').append(option);
                        }
                    }
                    if (userRoleId == 2) {  //2代表机务段管理人员
                        for (var i = 0; i < res.Data.length; i++) {
                            var option = document.createElement("option");
                            $(option).val(res.Data[i].DepID);
                            $(option).text(res.Data[i].DepName);
                            $('#ddl').append(option);
                        }
                    }
                },
                error: function (err) {
                    alert("错误2")
                }
            });
        }

        //查询按钮事件
        function btn_search() {

            //清空原有数据
            xDataStr = [];
            yDataStr = [];
            retDate = [];
            retNum = [];
            allDate = [];

            //获取下拉列表选中的项
            var options = $("#ddl option:selected");  
            ddlId = options.val();
            ddlName = options.text();

            //获取页面起止日期
            var sd = $("#startDate").val()
            var ed = $("#endDate").val()

            //获取曲线数据
            GetChartData(ddlId, sd, ed, userRoleId, parm)

            //加载曲线
            LoadChart()
        }

        //获取曲线数据
        function GetChartData(ddlId, sd, ed, userRoleId, parm) {
            //alert(ddlId)
            //alert(ddlId+"----"+sd + "----" + ed);
            //if (ddlId=="") {
            //    alert("请选择部门！")
            //    return
            //}

            //获取起止时间之间所有日期
            allDate = GetDates(sd, ed)  //返回的是数组。形如：2019-09-25
            //alert(allDate.join());

            //所有日期去掉“年”后赋值给X轴
            for (var i = 0; i < allDate.length; i++) {
                xDataStr.push(allDate[i].slice(5)) //去掉“2019-09-25”前5个字符
            }

            $.ajax({
                url: ApiUrl + "Charts/GetUserNumList",
                type: 'get',
                async: false,
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
                data: { "ddlId": ddlId, "startDate": sd, "endDate": ed, "userRoleId": userRoleId, "parm": parm },
                success: function (res) {
                    for (var i = 0; i < res.Data.length; i++) {
                        retDate.push(res.Data[i].StudyDate);
                        retNum.push(res.Data[i].num)
                    }

                    //给曲线y轴赋值
                    for (var i = 0; i < allDate.length; i++) {
                        if (retDate.includes(allDate[i])) {
                            var k = getArrayIndex(retDate, allDate[i])
                            yDataStr.push(retNum[k])

                        } else {
                            yDataStr[i] = 0
                        }
                    }
                }
            });

        }
        function LoadChart() {
            dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            option = null;
            option = {
                title: {
                    show: true,
                    text: ddlName + "学习曲线图",
                    x: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (datas) {
                        var res = '学习日期：' + datas[0].name + '<br/>', val;
                        for (var i = 0, length = datas.length; i < length; i++) {
                            val = datas[i].value;
                            res += '学习次数：' + val + '次<br/>';
                        }
                        return res;
                    }
                },
                xAxis: {
                    type: 'category',
                    name: '学习日期',
                    data: xDataStr
                },
                yAxis: {
                    type: 'value',
                    name: '学习次数',
                    minInterval: 1,  //坐标只允许整数
                },
                series: [{
                    data: yDataStr,
                    type: 'line',
                    smooth: true
                }]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }

        //---------根据起止日期获取中间所有日期 start------------
        function GetDates(startDate, endDate) { //日期范围之内
            var ab = startDate.split("-");
            var ae = endDate.split("-");
            var db = new Date();
            db.setFullYear(ab[0], ab[1] - 1, ab[2]);
            var de = new Date();
            de.setFullYear(ae[0], ae[1] - 1, ae[2]);
            var a = [];
            for (var i = 0, temp = db; temp < de; i++) {
                a[i] = returnDate(temp);
                temp.setTime(temp.getTime() + 24 * 60 * 60 * 1000);
            }
            a[i] = returnDate(de);
            //return a.join();
            return a;
        }
        //返回1900-01-01格式的字符串
        function returnDate(d) {
            var month;
            var dateDay;
            var yue = d.getMonth() + 1;
            var day = d.getDate();
            if (yue <= 9) {

                month = "0" + yue;

            } else {
                month = yue;
            }

            if (day <= 9) {
                dateDay = "0" + day;
            } else {
                dateDay = day;
            }
            return d.getFullYear() + "-" + month + "-" + dateDay;
        }
        //---------根据起止日期获取中间所有日期 end------------

        //-----------获取上月26日
        function getPreMonthDate() {
            var nowDate = new Date();
            var year = nowDate.getFullYear();
            var month = nowDate.getMonth() + 1;  //获取当前月份：如1或10
            var preMonth = month - 1;
            if (preMonth == 0) {  
                preMonth = 12;
                year = year - 1;
            }
            if (preMonth < 10) {
                preMonth = "0" + preMonth;
            }
            var yyyyMMdd = year + "-" + preMonth + "-" + "26";
            return yyyyMMdd
            //return "2019-09-26"
        }
        //----------获取当前日期
        function getCurrDate() {
            var nowDate = new Date();
            var year = nowDate.getFullYear();
            var month = nowDate.getMonth() + 1;
            var day = nowDate.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            var yyyyMMdd = year + "-" + month + "-" + day;
            return yyyyMMdd

        }

        //根据数组元素获取元素下标。
        function getArrayIndex(arr, obj) {
            var i = arr.length;
            while (i--) {
                if (arr[i] === obj) {
                    return i;
                }
            }
            return -1;
        }

        //根据用户UserID取用户角色RoleID
        function GetUserInfo(userId) {
            var ret = '';
            $.ajax({
                type: 'get',
                url: ApiUrl + "Charts/GetUserInfo",
                //url: ApiUrl + "aaa/GetU",
                cache: false,
                dataType: "json",
                async: false,
                data: { userId: userId },
                headers: {
                    "userid": JSON.parse(window.localStorage.authInfo).UserId,
                    "signtoken": JSON.parse(window.localStorage.authInfo).SignToken,
                },
                success: function (res) {

                    //alert("成功")
                    //console.log(res.Data[0].RoleID)
                    ret = res.Data[0];
                    //alert("1111")
                },
                error: function (err) {
                    alert("错误1");
                }
            });
            return ret;
        }
    </script>
</body>
</html>
